<?php
$imgtype = array("jpg","gif","bmp","jpeg","png");
function lastIndexOf($regex,$string) {
	$index = strpos(strrev($string),$regex);
	if ($index) {
		return strlen($string) - strlen($regex) - $index;
	}
	return -1;
}

function ext($filename) {
	$index = lastIndexOf(".",$filename);
	if ($index == -1)
		return "";
	return substr($filename,$index+1);
}
?>
<html>
<head>
	<meta charset="ISO-8859-1">
	<title>No title</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<script type="text/javascript">
	var IE = document.all?true:false;
	// If NS -- that is, !IE -- then set up for mouse capture
	if (!IE) document.captureEvents(Event.MOUSEMOVE);

	// Set-up to use testmove function onMouseMove
	document.onmousemove = testmove;
	document.onresize = testresize;
	
	var lastX = 0;
	var lastY = 0;
	var enterPermit = true;
	var count = 0;
	
	function testresize() {
		alert("Resize");
	}
	
	function testenter(e) {
		if (!enterPermit)
			return false;
		enterPermit = false;
		if (IE) { // grab the x-y pos.s if browser is IE
			lastX = event.clientX + document.body.scrollLeft;
			lastY = event.clientY + document.body.scrollTop;
		} else {  // grab the x-y pos.s if browser is NS
		    lastX = e.pageX;
		    lastY = e.pageY;
		}  
		document.Show.textname.value = count;
		document.Show.MouseX.value = lastX;
		document.Show.MouseY.value = lastY;
		return true;
	}
	
	function testmove(e) {
		var obj = document.getElementById("test");
		if (count % 2 == 0) {
			obj.scrollAmount=0;
			count = 0;
			return false;
		}
		var curX = 0;
		if (IE) { // grab the x-y pos.s if browser is IE
			curX = event.clientX + document.body.scrollLeft;
		} else {  // grab the x-y pos.s if browser is NS
		    curX = e.pageX;
		}
		obj.behavior = "scroll";
		if (curX > lastX + 5) {
			obj.direction="right";
			//obj.setAttribute("direction", "right");
			//document.Show.textname.value = "right";
		} else if (curX < lastX - 5) {
			obj.direction="left";
			//obj.setAttribute("direction", "left");
			//document.Show.textname.value = "left";
		}
		//obj.setAttribute("scrollAmount", "30");
		obj.scrollAmount=Math.abs(curX-lastX)/10;
		//document.Show.textname.value = Math.abs(curX-lastX);
		document.Show.textname.value = (count % 2);
		return true;
	}
	
	function testout() {
		lastX = 0;
		lastY = 0;
		enterPermit = true;
	}
	
	function testcount(e) {
		count = count + 1;

		if (IE) { // grab the x-y pos.s if browser is IE
			lastX = event.clientX + document.body.scrollLeft;
			lastY = event.clientY + document.body.scrollTop;
		} else {  // grab the x-y pos.s if browser is NS
		    lastX = e.pageX;
		    lastY = e.pageY;
		}

		document.Show.MouseX.value = lastX;
		document.Show.MouseY.value = lastY;
	}
	
	function changeImg(strSrc) {
		Show.image.src=strSrc;
	}
	</script>
</head>
<body>
	<form name="Show">
		<input type="text" name="MouseX" value="0" size="4"> X<br>
		<input type="text" name="MouseY" value="0" size="4"> Y<br>
		<img name="image" id="testimg" class="imgView" alt="Image Viewer" src="imgs/img05_.jpg">
		<div id="above" onmouseout="testcount(event)" class="block"></div>
		<marquee direction="right" behavior="alternate" scrollamount="0" id="test">
			<?php
			$path = "albums/album1";
			foreach (scandir($path) as $file) {
				if (!is_file($path."/".$file))
					continue;
				if (!in_array(ext($file),$imgtype))
					continue; ?>
				<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="<?=$path."/".$file?>">
<?			} 
			?>
<!--		
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img01.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img02.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img03.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img04.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img05.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img06.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img07.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img08.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img09.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img10.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img11.jpg">
			<img onclick="changeImg(src)" name="thumbnails" class="thumbs" alt="Thumbnails" src="imgs/img12.jpg">
-->
		</marquee>
		<div id="below" onmouseout="testcount(event)" class="block"></div>
		<input name="textname" id="text" value="Test" />
	</form>
</body>
</html>